<script setup lang='ts'>
const route = ref('是')
const data = ref([
  {
    name: '节点名称',
    dispalyName: '带宽',
    phohne: '冗余方式',
    email: '对接协议',
  },
])
const nodeList = ref([{}])
function addNode() {
  nodeList.value.push({})
}

function delNode(index: number) {
  nodeList.value.splice(index, 1)
}
</script>

<template>
  <div class="form-block !border-amber" data-title="客户业务节点">
    <BaseTable
      :data="nodeList"
      style="width: 100%;max-width:1200px"
    >
      <el-table-column prop="name" label="节点名称">
        <template #default="{ row }">
          <el-input />
        </template>
      </el-table-column>
      <el-table-column prop="dispalyName" label="带宽">
        <template #default="{ row }">
          <el-input />
        </template>
      </el-table-column>
      <el-table-column prop="phohne" label="冗余方式">
        <template #default="{ row }">
          <el-select placeholder="">
            <el-option label="无" value="无" />
            <el-option label="主备" value="主备" />
            <el-option label="负载" value="负载" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="dispalyName" label="MTU">
        <template #default="{ row }">
          <el-input />
        </template>
      </el-table-column>
      <el-table-column prop="dispalyName" label="VLAN">
        <template #default="{ row }">
          <el-input />
        </template>
      </el-table-column>
      <el-table-column prop="dispalyName" label="互联IP段">
        <template #default="{ row }">
          <el-input />
        </template>
      </el-table-column>
      <el-table-column prop="email" label="对接协议" width="200">
        <template #default="{ row }">
          <el-radio-group>
            <el-radio label="BGP" />
            <el-radio label="静态" />
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column prop="email" label="操作" width="80">
        <!-- 自定义表头 -->
        <template #header>
          <el-button type="primary" @click="addNode">
            +
          </el-button>
        </template>
        <template #default="{ row, $index }">
          <el-button type="danger" @click="delNode($index)">
            -
          </el-button>
        </template>
      </el-table-column>
    </BaseTable>
  </div>
  <div my6 />
  <div class="form-block !border-purple" data-title="个性化" grid grid-cols-2 items-center gap-2>
    <el-form-item label="端到端异路由">
      <el-radio-group v-model="route">
        <el-radio v-for="item in ['是', '否']" :key="item" :label="item">
          {{ item }}
        </el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item v-if="route === '是'" label="AZ点描述">
      <el-input />
    </el-form-item>
    <el-form-item label="主备切换时间">
      <el-input />
    </el-form-item>
    <el-form-item label="延时要求描述">
      <el-input />
    </el-form-item>
    <el-form-item label="丢包要求">
      <el-input />
    </el-form-item>
    <el-form-item label="监控告警要求">
      <el-input />
    </el-form-item>
    <el-form-item label="其他要求">
      <el-input />
    </el-form-item>
  </div>
</template>

<style scoped lang='scss'>

</style>
